<template>
  <div>
      <div class="box" v-for="(v,i) in this.$store.state.crr" :key="i">
        <img :src="v.cover" >
        <p class="num">{{v.gname}}</p>
        <p class="teather">{{v.teacher.tname}}</p>
        <p class="cash">{{v.price}}</p>
        <span class="stu"> {{v.stu_num}} 人学习</span>
      </div>
  </div>
</template>

<script>
export default {
  mounted(){
    this.$store.dispatch("axioslink",{url:"http://42.192.226.170:8000/api/show_goods/3/"})
  },
}
</script>

<style scoped>
    .box{
      width: 3.45rem;
      height: 1rem; 
      margin: auto;
      position: relative;
      margin-bottom: .2rem;
    }
    img{
      width: 75px;
      height: 1rem;
      background-color:tomato;
      border-radius: .1rem;
    }
    .num{
      position: absolute;
      top: 0;
      left:.92rem;
      font-size: .14rem;
    }
    .teather{
      position: absolute;
      top:.45rem;
      left:.92rem;
      font-size:.1rem;
      background-color:#f3f4f4 ;
    }
    .cash{
      color:#dd393d;
      font-size: .12rem;
      font-weight: bold;
      margin-bottom: .1rem;
      position: absolute;
      top: .84rem;
      left: .91rem;
    }
    .stu{
      font-size: .1rem;
      color: #696969;
      float: right;
      margin-top: 0.84rem;
    }
</style>